"use client"

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import { useEffect, useRef } from "react"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"

gsap.registerPlugin(ScrollTrigger)

const testimonials = [
  {
    id: 1,
    name: "张伟",
    company: "创新科技",
    quote: "这个平台彻底改变了我们的销售方式。",
    avatar: "/avatars/01.png",
  },
  {
    id: 2,
    name: "李明",
    company: "云端企业",
    quote: "智能分析让我们看到了之前看不到的机会。",
    avatar: "/avatars/02.png",
  },
  {
    id: 3,
    name: "王芳",
    company: "数据驱动",
    quote: "AI建议非常准确，帮助提升了40%的转化率。",
    avatar: "/avatars/03.png",
  },
  {
    id: 4,
    name: "刘强",
    company: "智慧商务",
    quote: "界面简洁，功能强大，强烈推荐！",
    avatar: "/avatars/04.png",
  },
  {
    id: 5,
    name: "陈静",
    company: "未来科技",
    quote: "最好的AI分析工具，没有之一。",
    avatar: "/avatars/05.png",
  },
  {
    id: 6,
    name: "赵磊",
    company: "数字营销",
    quote: "节省了大量时间，效率提升显著。",
    avatar: "/avatars/06.png",
  },
  {
    id: 7,
    name: "周丽",
    company: "业务增长",
    quote: "数据洞察非常深入，价值巨大。",
    avatar: "/avatars/07.png",
  },
  {
    id: 8,
    name: "吴兵",
    company: "战略咨询",
    quote: "改变了我们对客户的理解方式。",
    avatar: "/avatars/08.png",
  },
  {
    id: 9,
    name: "徐佳",
    company: "创新孵化",
    quote: "ROI超出预期，投资回报非常快。",
    avatar: "/avatars/09.png",
  },
  {
    id: 10,
    name: "孙浩",
    company: "数字化转型",
    quote: "团队协作更加高效，推荐给所有人。",
    avatar: "/avatars/10.png",
  },
  {
    id: 11,
    name: "马琳",
    company: "电商平台",
    quote: "智能推荐功能让销售变得轻松。",
    avatar: "/avatars/11.png",
  },
  {
    id: 12,
    name: "朱军",
    company: "企业服务",
    quote: "用户体验出色，功能强大。",
    avatar: "/avatars/12.png",
  },
  {
    id: 13,
    name: "胡燕",
    company: "云计算",
    quote: "数据分析精准度令人惊叹。",
    avatar: "/avatars/13.png",
  },
  {
    id: 14,
    name: "林涛",
    company: "人工智能",
    quote: "最佳的投资之一，效果立竿见影。",
    avatar: "/avatars/14.png",
  },
  {
    id: 15,
    name: "黄梅",
    company: "移动应用",
    quote: "帮助我们实现了快速增长。",
    avatar: "/avatars/15.png",
  },
  {
    id: 16,
    name: "杨刚",
    company: "软件开发",
    quote: "界面设计精美，易于使用。",
    avatar: "/avatars/16.png",
  },
  {
    id: 17,
    name: "罗红",
    company: "数据分析",
    quote: "AI建议帮助做出了关键决策。",
    avatar: "/avatars/17.png",
  },
  {
    id: 18,
    name: "何力",
    company: "市场研究",
    quote: "功能全面，值得信赖的平台。",
    avatar: "/avatars/18.png",
  },
  {
    id: 19,
    name: "高霞",
    company: "品牌策划",
    quote: "数据驱动的决策更有信心。",
    avatar: "/avatars/19.png",
  },
  {
    id: 20,
    name: "梁勇",
    company: "咨询服务",
    quote: "智能洞察带来了竞争优势。",
    avatar: "/avatars/20.png",
  },
]

// 创建两倍的卡片列表用于无缝滚动
const doubledTestimonials = [...testimonials, ...testimonials]

interface TestimonialCardProps {
  testimonial: {
    id: number
    name: string
    company: string
    quote: string
    avatar: string
  }
}

function TestimonialCard({ testimonial }: TestimonialCardProps) {
  const initials = testimonial.name.slice(0, 2)
  
  return (
    <div className="testimonial-card flex items-center gap-4 bg-card border border-border rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow min-w-[320px]">
      <Avatar className="size-12">
        <AvatarImage src={testimonial.avatar} alt={testimonial.name} />
        <AvatarFallback className="bg-primary/10 text-primary">
          {initials}
        </AvatarFallback>
      </Avatar>
      <div className="flex-1 min-w-0">
        <p className="text-sm text-foreground/90 mb-2 line-clamp-2">
          {testimonial.quote}
        </p>
        <div className="flex items-center justify-between">
          <span className="text-sm font-semibold text-foreground">
            {testimonial.name}
          </span>
          <span className="text-xs text-foreground/60">
            {testimonial.company}
          </span>
        </div>
      </div>
    </div>
  )
}

export function Testimonials() {
  const sectionRef = useRef<HTMLElement>(null)
  const firstRowRef = useRef<HTMLDivElement>(null)
  const secondRowRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!sectionRef.current) return

    const cards = sectionRef.current.querySelectorAll(".testimonial-card")
    
    // Set initial state
    gsap.set(cards, {
      y: 100,
      opacity: 0
    })

    // Create scroll trigger animation
    gsap.to(cards, {
      y: 0,
      opacity: 1,
      duration: 0.6,
      stagger: 0.05,
      ease: "power3.out",
      scrollTrigger: {
        trigger: sectionRef.current,
        start: "top 80%",
        end: "bottom 20%",
        toggleActions: "play none none none"
      }
    })

    // Cleanup
    return () => {
      ScrollTrigger.getAll().forEach(trigger => trigger.kill())
    }
  }, [])

  return (
    <section ref={sectionRef} className="py-20 bg-muted/30 overflow-hidden">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <h2 className="text-3xl sm:text-4xl font-bold text-center mb-12">
          客户证言
        </h2>
        
        {/* 第一行 - 向左滚动 */}
        <div ref={firstRowRef} className="mb-8">
          <div className="flex gap-4 animate-scroll-left">
            {doubledTestimonials.map((testimonial, index) => (
              <TestimonialCard key={`row1-${index}`} testimonial={testimonial} />
            ))}
          </div>
        </div>

        {/* 第二行 - 向右滚动 */}
        <div ref={secondRowRef}>
          <div className="flex gap-4 animate-scroll-right">
            {doubledTestimonials.map((testimonial, index) => (
              <TestimonialCard key={`row2-${index}`} testimonial={testimonial} />
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
